<!--
 * @Author: cqg
 * @Date: 2021-06-11 10:19:01
 * @LastEditTime: 2021-06-24 09:17:21
 * @Description: 租赁管理合同信息公共组件
 * @LastEditors: cqg
-->

<template>
  <div>
    <!--合同信息-->
    <el-row :gutter="16">
      <el-col :span="6">
        <contractPreview :pdfUrl="formData.contractUrl" :contractName="formData.contractName" />
      </el-col>
      <el-col :span="18">
        <el-card>
          <div slot="header" class="clearfix">
            <span>承租方信息</span>
          </div>
          <div class="text item">
            <el-form class="form-wrap" :model="propForm" size="small" ref="propForm" label-position="top">
              <el-form-item label="承租方名称:">
                <span>{{propForm!=null?propForm.clientLesseeName:""}}</span>
              </el-form-item>
              <el-form-item label="承租方类型:">
                <span>{{lessee}}</span>
              </el-form-item>
              <!-- 第一行第3列-->
              <el-form-item v-show="propForm !=null && propForm.clientLesseeType=='0'" label="证件类型:">
                <span>{{personageCertificate}}</span>
              </el-form-item>
              <el-form-item v-show="propForm!=null && propForm.clientLesseeType!='0'" label="证件类型:">
                <span>{{commercialCertificate}}</span>
              </el-form-item>
              <!-- 第一行第4列-->
              <el-form-item label="证件号码:">
                <span>{{propForm!=null?propForm.certificateNum:""}}</span>
              </el-form-item>

              <!-- 第二行-->
              <!-- 如果不是 "个人"，则会将下面一行会显示出来-->
              <el-form-item v-show="propForm!=null && propForm.clientLesseeType!=0" label="法人代表:">
                <span>{{propForm!=null?propForm.legalPerson:""}}</span>
              </el-form-item>
              <el-form-item v-show="propForm!=null &&  propForm.clientLesseeType!=0" label="身份证号码:">
                <span>{{propForm!=null?propForm.legalIdentityCard:""}}</span>
              </el-form-item>
              <el-form-item v-show="propForm!=null " label="手机号码:">
                <span>{{propForm!=null?propForm.phoneNum:""}}</span>
              </el-form-item>
              <el-form-item v-show="propForm!=null && propForm.clientLesseeType!=0" label="联系电话:">
                <span>{{propForm!=null?propForm.telephone:""}}</span>
              </el-form-item>
              <el-form-item v-show="propForm!=null && propForm.clientLesseeType!=0" label="行业类别:">
                <span>{{propForm!=null?propForm.categroyEmployment:""}}</span>
              </el-form-item>
              <el-form-item v-show="propForm!=null && propForm.clientLesseeType!=0" label="产业引进部门:">
                <span>{{propForm!=null?propForm.introduceUnit:""}}</span>
              </el-form-item>
              <el-form-item v-show="propForm!=null && propForm.name!=0" label="联系人:">
                <span>{{propForm!=null?propForm.name:""}}</span>
              </el-form-item>
              <el-form-item v-show="propForm!=null && propForm.phone!=0" label="联系人电话:">
                <span>{{propForm!=null?propForm.phone:""}}</span>
              </el-form-item>
              <el-form-item v-show="propForm!=null " label="详细地址:">
                <span>{{propForm!=null?propForm.address:""}}</span>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
        <br />
        <el-card>
          <div slot="header" class="clearfix">
            <span>物业信息</span>
          </div>
          <div class="text item">
            <el-row>
              <el-table :data="formData.rentContractRooms" stripe align="left" style="width: 100%">
                <el-table-column type="index" align="left" width="50" />
                <el-table-column label="物业名称" align="left" prop="propertyName" width="150">
                  <template slot-scope="scope">
                    <el-link type="primary" :underline="false" @click="$refs.propertyPreview.open({id: scope.row.roomId,projectId:scope.row.projectId	})">{{scope.row.propertyName}}</el-link>
                  </template>
                </el-table-column>
                <el-table-column label="建筑面积（㎡）" align="left" prop="buildingArea" width="100" />
                <el-table-column prop="assessPrice" align="left" :formatter="priceFormatter" label="评估价（元/㎡/月）" width="100" />
                <el-table-column label="物业大类" align="left" prop="projectType" width="130" :formatter="dataFormatter" />
                <el-table-column label="物业小类" align="left" prop="projectSubclassType" width="130" :formatter="dataFormatter" />
                <el-table-column label="物业细类" align="left" prop="projectSubdivide" width="130" :formatter="dataFormatter" />
                <el-table-column label="市场评估租金单价（元/㎡/月）" :formatter="priceFormatter" align="left" prop="assessPrice" width="100" v-if="false" />
                <el-table-column prop="price" align="left" :formatter="priceFormatter" label="单价（元/㎡/月）" width="100" />
                <el-table-column prop="remarks" align="left" label="说明" width="100" />
              </el-table>
            </el-row>
          </div>
        </el-card>
        <br />
        <el-card>
          <div slot="header" class="clearfix">
            <span>租金标准</span>
          </div>
          <div class="text item">
            <el-row>
              <el-table :data="formData.rentContractDetails" stripe style="width: 100%">
                <el-table-column prop="startDate" label="开始时间" width="100" />
                <el-table-column prop="endDate" label="结束时间" width="100" />
                <el-table-column prop="priceFinal" label="月租金" :formatter="priceFormatter" width="100" />
                <el-table-column prop="remarks" label="说明" width="100" />
              </el-table>
            </el-row>
          </div>
        </el-card>
        <br />
        <el-card>
          <div slot="header" class="clearfix">
            <span>其他款项</span>
          </div>
          <div class="text item">
            <el-row>
              <el-table :data="formData.rentContractProfees" style="width: 100%">
                <el-table-column prop="chargeProjectName" label="费用项目名称" width="180" />
                <el-table-column prop="amount" label="金额" :formatter="priceFormatter" width="180" />
              </el-table>
            </el-row>
          </div>
        </el-card>
        <br />
        <el-card>
          <div slot="header" class="clearfix">
            <span>合同信息</span>
          </div>
          <div class="text item">
            <el-row>
              <el-form :model="formData" class="form-wrap" size="small">
                <el-form-item label="合同编号" prop="contractCode">
                  <span>{{formData.contractCode}}</span>
                </el-form-item>
                <el-form-item label="签订方式" prop="signType">
                  <span>{{signType}}</span>
                </el-form-item>
                <el-form-item label="收取方式" prop="feeType">
                  <span>{{feeType}}</span>
                </el-form-item>
                <el-form-item v-if="formData.feeType=='6'" label="自定义收费周期" prop="feeTypeValue">
                  <span>{{formData.feeTypeValue}}</span>
                </el-form-item>
                <el-form-item label="应收日" prop="feeDate">
                  <span>{{formData.feeDate}}</span>
                </el-form-item>
                <el-form-item label="合同订日期" prop="signDate">
                  <span>{{formData.signDate}}</span>
                </el-form-item>
                <el-form-item label="合同开始日期" prop="startDate">
                  <span>{{formData.startDate}}</span>
                </el-form-item>
                <el-form-item label="合同结束日期" prop="endDate">
                  <span>{{formData.endDate}}</span>
                </el-form-item>
                <el-form-item label="装修免租期" prop="rentStartDate">
                  <span>{{formData.freeFeeStart}}-{{formData.freeFeeEnd}}</span>
                </el-form-item>

                <el-form-item label="起租日期" prop="rentStartDate">
                  <span>{{formData.rentStartDate}}</span>
                </el-form-item>
                <el-form-item label="合同类型">{{formData.type|dict('rent_contract_type')}}</el-form-item>
                <el-form-item label="合同细类">
                  <span>{{formData.subType|dict('rent_contract_sub_type')}}</span>
                </el-form-item>
                <el-form-item label="建筑面积">
                  <span>{{formData.buildingArea}}</span>
                </el-form-item>
                <el-form-item label="月租金">
                  <span>{{formData.rentAmount | thousandMoney}}</span>
                </el-form-item>
                <el-form-item label="管理所" prop="administrativeOffice">{{formData.administrativeOffice|dict('administrative_office')}}</el-form-item>
                <el-form-item label="备注" prop="remarks">
                  <span>{{formData.remarks}}</span>
                </el-form-item>
              </el-form>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 物业查看 -->
    <propertyPreview ref="propertyPreview" append-to-body />
  </div>
</template>

<script>
import { getObj } from '../../api/rent-contract.js'
import { getObj as getClientManage } from "@/views/wy-client/api/clientlessee.js";
import contractPreview from "@/components/contractPreview";
import propertyPreview from "@/views/wy-info/property-manage/list/components/preview";

export default {
  name: 'contractInformation',
  components: {
    contractPreview,
    propertyPreview
  },
  data () {
    return {
      formData: {},
      propForm: {},
      personageCertificate: '',
      feeType: "", //计租方式
      type: "", //合同类型
      lessee: "",
      commercialCertificate: "",
      signType: "", //签订方式

    }
  },
  methods: {
    //加载列表
    async loadContractList (contractId) {
      let response = await getObj(contractId, 1)
      this.formData = response.data.data;
      //获得承租方信息
      if (this.formData.customerId) {
        const propForm = await getClientManage(
          this.formData.customerId, 1);
        this.propForm = propForm.data.data;
        this.showlessee();
      }
    },
    //展示证件类型
    showlessee () {
      this.type = this.getDictLabel("rent_contract_type", this.propForm?.type);
      this.feeType = this.getDictLabel("rent_fee_type", this.formData?.feeType);
      this.lessee = this.getDictLabel(
        "lessee_type",
        this.propForm?.clientLesseeType
      );
      this.provider = this.getDictLabel(
        "provider_type",
        this.propForm?.providerType
      );
      this.signType = this.getDictLabel(
        "rent_signing_method",
        this.formData?.signType
      );
      this.subType = this.getDictLabel(
        "rent_contract_sub_type",
        this.propForm?.subType
      );
      this.approveType = this.getDictLabel(
        "rent_contract_approve_type",
        this.propForm?.approveType
      );
      this.administrativeOffice = this.getDictLabel(
        "administrative_office",
        this.propForm?.administrativeOffice
      );
      this.commercialCertificate = this.getDictLabel(
        "commercial_certificate_type",
        this.propForm?.certificateType
      );
      this.personageCertificate = "身份证";
    },
    // 获取字典的label名称
    getDictLabel (dictName, val) {
      if (!dictName || !val) return "";
      let item = this.getDict(dictName).find(i => i.value == val);
      return item?.label || "";
    },
    // 数据格式化
    dataFormatter (row, column, cellValue) {
      switch (column.property) {
        case "projectType":
          return this.$options.filters.dict(cellValue, "property_types") || "";
        case "projectSubclassType":
          return (
            this.$options.filters.dict(cellValue, "property_use_types") || ""
          );
        case "projectSubdivide":
          return (
            this.$options.filters.dict(cellValue, "project_subdivide") || ""
          );
        default:
          return "";
      }
    }
  },
}
</script>

<style lang="scss" scoped>
</style>
